Skip to content

Latest commit

 

History

History
96 lines (73 loc) · 3.39 KB

03. Variáveis em Sass.md

File metadata and controls

96 lines (73 loc) · 3.39 KB
Raw

Variáveis em Sass 🎨

Ao utilizarmos o Sass, um dos recursos principais e iniciais são as variáveis, um recurso que parece básico, porém vital para a otimização do código e desempenho da página.

Mais adiante, em lógica de programação conheceremos, mais a fundo o conceito de variáveis e sua manipulação. No entanto, neste momento, o que devemos saber é que variáveis servem para guardar algum dado, como uma cor, altura de um elemento, largura, ou valor CSS. A sintaxe de definição delas é quase igual à sintaxe de definição de propriedades de CSS. A diferença é que o nome da variável é precedido por $. Elas também são acessadas com o $ antes do nome delas.

  • Variáveis no SASS facilitam a reutilização de valores em diferentes partes do código.

  • Ajudam a manter o código mais organizado e legível.

  • As variáveis também simplificam a manutenção futura e a atualização de valores.

imagem valores variáveis

Outros exemplos:

// String
$fonte-principal: "Arial, sans-serif";
$fonte-secundaria: "Helvetica, sans-serif";
// Cor
$minha-cor: "#333333";  // Hexadecimal
$cor-rgb: rgb(255, 87, 51);  // RGB
$cor-hsl: hsl(14, 100%, 60%);  // HSL
$nome-da-cor: red;  // Nome da cor
// Números
$meu-numero-px: 16px;  // Com unidade 'px'
$meu-numero-em: 2em;  // Com unidade 'em'
$meu-numero-percent: 50%;  // Com unidade '%'
// Lista
$minha-lista: 5px 10px 15px 20px;  // Lista de espaçamentos
$cores-lista: red blue green yellow;  // Lista de cores
$fontes-lista: 'Arial', 'Helvetica', 'sans-serif';  // Lista de fontes

Exemplo prático declaração e uso de variáveis:

// Variáveis
$cor-primaria: #333; // 🎨 Cor primária
$melhor-cor: tomato; // 🎨 Melhor cor do mundo

$espacamento-padrao: 10px; // 📏 Espaçamento
$tamanho-padrao: "2em"; // 📏 Tamanho de fonte padrão

body {
  background-color: $cor-primaria; // 🖌️ Cor do texto
  padding: $espacamento-padrao; // 📦 Espaçamento interno
}

h1 {
  color: $melhor-cor; // Cor do titulo
  font-size: $tamanho-padrao; // Tamanho do titulo
}
<!DOCTYPE html>
<html lang="pt-br">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vai No SCSS</title>
    <!-- NÃO SE ESQUEÇA DE LINKAR O STYLE.CSS NA TAG LINK -->
    <!-- LEMBRE-SE DEVE LINKAR O CÓDIGO GERADO PELA EXTENSÃO -->
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <h1>Esse título tem a melhor cor do mundo</h1>
  </body>
</html>

Resultado Final 🖼️

Ao final, utilizando o Sass e suas variáveis, nossa página ficará dessa forma!!!

Imagem página finalizada

Lembrando que o design foi criado apenas para prática 😂😂😂

Conclusão 🏁

À medida que você pratica, perceberá a importância das variáveis no SCSS. Explorar e aplicar variáveis em diferentes contextos é crucial para dominar o desenvolvimento de estilos dinâmicos.

🚀 Continue praticando e explorando! Bons códigos e vamos para os exercícios! 📚👨‍💻

Exercícios - Clique aqui!

Próxima matéria - Clique aqui!